Introdução à Lógica de Programação

Aula 12 - Depuração

Helder Jefferson Ferreira da Luz

helder.luz@ifpr.edu.br

Objetivos da aula

• Compreender o que é um teste de mesa e como ele pode ajudar na análise do fluxo de um programa.
• Entender a prática de depuração utilizando o VSCode.
• Desenvolver habilidades para identificar e corrigir erros lógicos e de execução.

Identificando erros

Na programação, erros são inevitáveis.

Para auxiliar na identificação e correção de erros há duas técnicas principais:

• Teste de mesa
• Debugging (Depuração)

Teste de mesa

Técnica usada para simular a execução de um programa, permitindo acompanhar o valor das variáveis e o fluxo de execução passo a passo.

Funciona simulando a execução do código no papel (ou mentalmente).

Objetivo:

• Identificar possíveis erros lógicos ou comportamentos inesperados no código.

Teste de mesa

Quando usar:

• Para entender o comportamento do programa.
• Para encontrar erros lógicos antes da execução real do código.

Teste de mesa

Como Fazer um Teste de Mesa:

• Escolha um programa e divida-o em suas linhas.
• Crie uma tabela com as variáveis que o programa utiliza.
• Para cada linha de código, registre os valores das variáveis na tabela, de acordo com o fluxo de execução.

Teste de mesa

Exemplo

/* 1 */ let contador = 1;
/* 2 */ let resultado = 0;
/* 3 */ 
/* 4 */ while (contador <= 3) {
/* 5 */     resultado = resultado + contador;
/* 6 */     contador = contador + 1;
/* 7 */ }

Teste de mesa - exemplo

Teste de mesa - exemplo

Explicação

1. Inicialização: contador é 1 e resultado é 0.
2. Primeira Iteração: resultado acumula o valor de contador (1), e contador aumenta para 2.
3. Segunda Iteração: resultado acumula o novo valor de contador (2), somando-se a 3, e contador aumenta para 3.
4. Terceira Iteração: resultado acumula novamente (3), somando-se a 6, e contador aumenta para 4.
5. Fim do Laço: Como contador agora é maior que 3, o laço while termina.

Teste de mesa - benefícios

Benefícios do Teste de Mesa

• Permite uma compreensão clara do fluxo de controle e dos valores das variáveis.
• Identificação de erros lógicos antes da execução do código.
• Ajuda a construir uma base sólida para a depuração com ferramentas.

Depuração

Depuração (ou "debugging") é o processo de localizar e corrigir erros no código enquanto ele está sendo executado.

As ferramentas de depuração permitem:

• executar o programa linha a linha
• observar os valores das variáveis
• alterar o fluxo de execução conforme necessário.

Ferramentas de depuração

Há diversas ferramentas para depuração de código JavaScript, algumas opções são:

• Depuração no VSCode com Node.js
• Depuração no VSCode com Chrome/Edge
• Depuração no navegador com ferramenta de desenvolvedor

Ferramentas de Depuração no VSCode

• Breakpoints: Pausam a execução do código em pontos específicos.
• Watch (Inspeção): Permite monitorar valores de variáveis em tempo real.
• Continue (F5): Avança para o próximo breakpoint.
• Step Over (F10): Avança para a próxima linha de código.
• Step Into (F11): Entra em funções ou métodos chamados.
• Step Out (Shift + F11): Sai de uma função ou método e volta para o ponto anterior.

Exemplo de depuração

let x = 0;
let y = 10;
while (x < 5) {
    y = y - x;
    x = x + 1;
}

1. Coloque um breakpoint na linha do while.
2. Inicie a depuração e observe os valores de x e y.
3. Use a ferramenta para acompanhar a evolução dos valores e identificar o comportamento do laço.

Ferramentas de Depuração no VSCode

Adicionando breakpoint no código

Ferramentas de Depuração no VSCode

Botão para iniciar o debug

Ferramentas de Depuração no VSCode

Escolha o debugger do Node.js

Ferramentas de Depuração no VSCode

Botões de controle da depuração

Ferramentas de Depuração no VSCode com Edge

Escolha o debugger de Aplicativo Web

Ferramentas de Depuração no navegador

Ferramentas de Desenvolvedor (Ctrl + Shift + I) > Fontes

Dicas para Depuração

• Comece com pequenos trechos de código para depurar e entender o problema.
• Use o Watch para acompanhar as variáveis importantes.
• Utilize logs simples (ex: print()) se você não estiver familiarizado com ferramentas de depuração avançadas.

Dúvidas?

Exercícios

1. Faça o teste de mesa para o seguinte programa e registre as mudanças de cada variável:

let a = 10;
let b = 5;
while (a > 0) {
    a = a - 2;
    b = b + 1;
}

2. Utilize a depuração para identificar e corrigir o erro do seguinte código:

let x = 10;
while (x >= 0) {
    console.log(x);
    x += 1; 
}

Exercícios

3. Faça o teste de mesa e use o depurador para analisar como a variável somaImpares é atualizada ao longo do laço. Identifique o valor final da variável.

let num = 1;
let somaImpares = 0;

while (num <= 10) {
    if (num % 2 !== 0) {
        somaImpares = somaImpares + num;
    }
    num = num + 1;
}

Exercícios

4. Execute o teste de mesa e utilize a depuração para entender o comportamento do laço e a lógica condicional. Qual será o valor final de total?

let num = 10;
let total = 0;

while (num > 0) {
    total = total + num;
    if (num === 5) {
        total = total - 5;
    }
    num = num - 1;
}

Exercícios

5. Usando o teste de mesa, determine o valor final de produto. Depois, use o depurador para verificar a execução linha por linha e comparar os resultados.

let a = 1;
let produto = 1;

while (a <= 5) {
    produto *= a;
    a += 1;
}

Exercícios

6. Execute um teste de mesa e utilize o depurador para entender como o valor de resultado muda em cada iteração. Qual será o valor final de resultado?

let n = 6;
let resultado = 0;

while (n > 0) {
    if (n % 2 === 0) {
        resultado += n;
    }
    n -= 1;
}